<template>
  <div id="">
    <div class="headerbox">
      <span class="backIcon" @click="goback()">
        <img src="@/assets/arrow_left_white.png" alt="">
      </span>
      <search-box></search-box>
      <span class="shareIcon" @click="toClassify">
        <img src="@/assets/sportsMall/class_icon.png" alt="" width="20">
      </span>
    </div>
    <p class="pb10"></p>
    <banner-slider></banner-slider>

    <class-menu class="mb10"></class-menu>

    <div class="mb10 p10 bgWhite">
      <p class="titleTip">最新上架</p>
      <div class="goodslist">
        <goods-item class="goodsitem" v-for="elem in 3"></goods-item>
      </div>
    </div>
    <div class="mb10 p10 bgWhite">
      <p class="titleTip">天天上架</p>
      <div class="goodslist">
        <goods-item class="goodsitem" v-for="elem in 3"></goods-item>
      </div>
    </div>

    <div class="bgWhite pb10 mb10">
      <div class="youRecommendTip" align="center">
        <img src="@/assets/sportsMall/imperialcrown_shop_icon.png" alt="" width="20">
        <span>优品推荐</span>
      </div>
      <img src="@/assets/sportsMall/image1.png" alt="" width="100%" class="mb10">

      <div class="goodslist">
        <goods-item class="goodsitem" v-for="elem in 3"></goods-item>
      </div>
      <p class="p10"></p>
      <hr style="borderColor:#fefefe;">
      <p class="p10"></p>
      <img src="@/assets/sportsMall/image1.png" alt="" width="100%" class="mb10">

      <div class="goodslist">
        <goods-item class="goodsitem" v-for="elem in 3"></goods-item>
      </div>
    </div>

    <div class="mb10 p10 bgWhite">
      <p class="titleTip">爆款单品</p>
      <div class="goodslist baokuan">
        <goods-item class="goodsitem" v-for="elem in 10"></goods-item>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  data: () => ({

  }),
  components: {
    searchBox:()=>import('@/sportsMall/components/searchBox/searchBox'),
    bannerSlider:()=>import('@/sportsMall/components/bannerSlider/bannerSlider'),
    classMenu:()=>import('./template/classMenu'),
    goodsItem:()=>import('./template/goodsItem'),
  },
  methods: {
    // 返回上一页
    goback() {
      this.$router.go(-1);
    },
    // 跳转到商品分类页面
    toClassify(){
      this.$router.push({name:'mallClassification'});
    }
  }
}
</script>
<style lang="scss" scoped>
.headerbox{
  // height: 40px;
  color: white;
  // line-height: 40px;
  background: #0d7ce4;
  background: -webkit-linear-gradient(right bottom,#04a0fb,#0d7ce4);
	background: linear-gradient(right bottom,#04a0fb,#0d7ce4);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  .backIcon,.shareIcon{
    position: absolute;
    left: 0px;
    top: 50%;
    padding:10px;
    transform: translateY(-50%);
    img{
      width: 10px;
    }
  }
  .shareIcon{
    left: auto;
    right: 0px;
    img{
      width: 25px;
    }
  }

}
.titleTip{
  border-left: 2px solid $blueColor;
  padding-left: 10px;
  margin-bottom: 10px;
}
.goodslist{
  @include flex;
  .goodsitem{
    @include flexcell;
  }
}
// 爆款样式
.baokuan{
  flex-wrap: wrap;
  .goodsitem{
    flex: none;
    width: 48%;
    margin-right: 6px;
    border: 1px solid $borderColor;
    border-radius: 4px;
    margin-bottom: 6px;
    padding: 10px 0;
    .goodsitemImg{
      border-right: none;
    }
    &:nth-child(2n){
      margin-right: 0;
    }
  }
}

.youRecommendTip{
  padding: 10px;
  font-size: 16px;
  margin-bottom: 10px;
  span{
    border-bottom: 2px solid $blueColor;
    padding-bottom: 6px;
    margin-left: 8px;
  }
}
</style>
